<template>
  <view class="menu-grid">
    <text class="title">{{title}}</text>
    <view class="grid-container">
      <view 
        class="grid-item" 
        v-for="(item, index) in items" 
        :key="index"
        @click="navigateTo(item.path)"
      >
        <uni-icons :type="item.icon" size="24" color="$primary-color"></uni-icons>
        <text class="text">{{item.text}}</text>
        <text class="value" v-if="item.value">{{item.value}}</text>
        <uni-badge 
          v-if="item.badge" 
          :text="item.badge" 
          type="error" 
          size="small"
        ></uni-badge>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  items: {
    type: Array,
    default: () => []
  }
})

const navigateTo = (path) => {
  if (path) {
    uni.navigateTo({
      url: path
    })
  }
}
</script>

<style lang="scss">
@import "@/uni.scss";
.menu-grid {
  background-color: $white-bg;;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .title {
    display: block;
    font-size: $font-size-30rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    
    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 20rpx 0;
      
      .text {
        font-size: 24rpx;
        margin-top: 10rpx;
        text-align: center;
      }
      
      .value {
        font-size: 22rpx;
        color: $primary-color;
        margin-top: 6rpx;
      }
      
      .uni-icons:last-child {
        position: absolute;
        right: -10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      
      .uni-badge {
        position: absolute;
        top: 0;
        right: 10rpx;
      }
    }
  }
}
</style>